﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StockByCategories.aspx.cs" Inherits="GPSTrackingWebsiteManager.Manager.Pages.StockByCategories" %>

<!DOCTYPE html>


<link href="../../Css/GPSTrackingWebsite.css" rel="stylesheet" />
<link href="../../Css/messi.css" rel="stylesheet" />
<script src="../../Javascript/jquery-1.11.1.min.js"></script>
<script src="../../Javascript/messi.js"></script>
<script src="../../Javascript/Custom.js"></script>
<script src="../../Javascript/WindowMessageManager.js"></script>
<link href="../../Css/metro-bootstrap.css" rel="stylesheet" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
        <script type="text/javascript">

            function resizeGrid() {
                var height = window.innerHeight;
                var width = window.innerWidth;

                var tableView = $find("<%=StocksGrid.ClientID %>");
                tableView.get_element().style.height = height + "px";
                tableView.get_element().style.width = (width / 4) * 3 + "px";

                var tableView2 = $find("<%=StockCategoriesGridTree.ClientID %>");
                tableView2.get_element().style.height = height + "px";
                tableView2.get_element().style.width = (width / 4) * 1 + "px";


                document.getElementById('HiddenFieldHeight').value = height;
                document.getElementById('HiddenFieldWidth').value = width;
            }

            function OpenAditionalImages() {
                var wnd = $find('<%=rwStockAditionalImages.ClientID %>');
                wnd.show();
                resizeGrid();
            }

            //Windows Message Manager 
            var objWindowsMessageManager = new WindowsMessageManager();

            var popUp;
            function OpenLightBox(image) {

                var imagesrc = '<%= GetPathStockImage() %>';

                var lightBox = $find('<%= RadLightBox1.ClientID %>');
                var lightBoxItem = new Telerik.Web.UI.LightBoxItem;
                lightBoxItem.set_imageUrl(imagesrc + image);
                lightBoxItem.set_title("Imagen Principal");
                var lightBoxItemCollection = lightBox.get_items();
                lightBoxItemCollection.clear();
                lightBoxItemCollection.add(lightBoxItem);

                lightBox.show();
            }

            function OpenLightBoxPDF(pdf) {
                console.log('PDF');
                var src = '<%= GetPathStockPdf() %>';
                console.log(src + pdf);
                var lightBox = $find('<%= RadLightBox2.ClientID %>');
                document.getElementById('RadLightBox2_iframeLightBox').src = src + pdf;
                lightBox.show();

            }

            function OpenLightBoxVideo(video) {
                var src = '<%= GetPathStockVideo() %>';
                window.open(src + video, 'Video', 'width=300, toolbar=no, titlebar=no, menubar=no, location=no, addressbar=no');
            }

            function onPopUpShowing(sender, args) {
                popUp = args.get_popUp();
            }

        </script>
    </telerik:RadScriptBlock>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }

        .rltbDescriptionBox {
            display: none !important;
        }

        .ruBrowse {
            background-position: 0 -46px !important;
            width: 221px !important;
        }

        /* Error */
        .ruError .ruErrorMessage {
            color: #ef0000;
            font-variant: small-caps;
            text-transform: lowercase;
            padding-bottom: 0;
        }
    </style>
</head>
<body onresize="resizeGrid()" style="overflow: hidden">
    <form id="form1" runat="server">
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="StockCategoriesGridTree">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="HiddenFieldHeight" UpdatePanelCssClass="" />
                        <telerik:AjaxUpdatedControl ControlID="HiddenFieldError" UpdatePanelCssClass="" />
                        <telerik:AjaxUpdatedControl ControlID="StockCategoriesGridTree" UpdatePanelCssClass="" />

                        <telerik:AjaxUpdatedControl ControlID="StocksGrid" UpdatePanelCssClass="" />

                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="StocksGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="HiddenFieldHeight" UpdatePanelCssClass="" />
                        <telerik:AjaxUpdatedControl ControlID="HiddenFieldError" UpdatePanelCssClass="" />
                        <telerik:AjaxUpdatedControl ControlID="StocksGrid" UpdatePanelCssClass="" />

                        <telerik:AjaxUpdatedControl ControlID="StocksAditionalImagesGrid" LoadingPanelID="RadAjaxLoadingPanel1" />

                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="StocksAditionalImagesGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="HiddenFieldHeight" UpdatePanelCssClass="" />
                        <telerik:AjaxUpdatedControl ControlID="HiddenFieldError" UpdatePanelCssClass="" />
                        <telerik:AjaxUpdatedControl ControlID="StocksAditionalImagesGrid" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="StocksAditionalImagesGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="HiddenFieldHeight" />
                        <telerik:AjaxUpdatedControl ControlID="HiddenFieldError" />
                        <telerik:AjaxUpdatedControl ControlID="StocksAditionalImagesGrid" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadLightBox2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadLightBox2" UpdatePanelCssClass="" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
        <asp:HiddenField ID="HiddenFieldHeight" runat="server" Value="500" />
        <asp:HiddenField ID="HiddenFieldWidth" runat="server" Value="500" />
        <asp:HiddenField ID="HiddenFieldError" runat="server" />
        <asp:HiddenField ID="HiddenFieldTreeViewHasFocus" runat="server" />
        <div>

            <table cellpadding="0" cellspacing="0" class="auto-style1">
                <tr>
                    <td>
                        <telerik:RadGrid ID="StockCategoriesGridTree" runat="server" AllowSorting="true" AutoGenerateColumns="False" CellSpacing="0" GridLines="None" GroupingSettings-CaseSensitive="false" Height="100%" OnDataBound="StockCategoriesGridTree_DataBound" OnItemCommand="StockCategoriesGridTree_ItemCommand" OnNeedDataSource="StockCategoriesGridTree_NeedDataSource" Width="100%">
                            <MasterTableView AllowFilteringByColumn="false" CommandItemDisplay="TopAndBottom">
                                <CommandItemTemplate>
                                    <div style="padding: 5px 5px;">
                                        Categorias:
                                    <asp:LinkButton ID="lbExpandAllNodes" runat="server" CommandName="ExpandAllNodes" Visible="<%# !StocksGrid.MasterTableView.IsItemInserted %>"><img style="padding-left:10px; padding-right:5px; vertical-align:middle" alt="" src="../../Template/Icons/16px/arrow-expand-icon.png"/>Expandir</asp:LinkButton>
                                        <asp:LinkButton ID="lbCollapseAllNodes" runat="server" CommandName="CollapseAllNodes" Visible="<%# !StocksGrid.MasterTableView.IsItemInserted %>"><img style="padding-left:10px; padding-right:5px; vertical-align:middle" alt="" src="../../Template/Icons/16px/arrow-expand-icon.png"/>Colapsar</asp:LinkButton>
                                        <asp:LinkButton ID="lbShowError" runat="server" OnClick="lbShowError_Click" Visible="<%# HiddenFieldError.Value == string.Empty ? false : true %>"><img style="padding-left:10px; padding-right:5px; vertical-align:middle" alt="" src="../../Template/Icons/16px/bug-icon.png"/>Error Técnico</asp:LinkButton>
                                    </div>
                                </CommandItemTemplate>
                                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
                                    <HeaderStyle Width="20px" />
                                </RowIndicatorColumn>
                                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
                                    <HeaderStyle Width="20px" />
                                </ExpandCollapseColumn>
                                <Columns>
                                    <telerik:GridTemplateColumn ShowFilterIcon="true">
                                        <ItemTemplate>
                                            <telerik:RadTreeView ID="StockCategoriesGridTreeView" runat="Server" MultipleSelect="false" OnNodeClick="StockCategoriesGridTreeView_NodeClick" OnNodeDataBound="StockCategoriesGridTreeView_NodeDataBound">
                                            </telerik:RadTreeView>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                            </MasterTableView>
                            <ClientSettings>
                                <Scrolling AllowScroll="True" SaveScrollPosition="True" UseStaticHeaders="True" />
                            </ClientSettings>
                            <FilterMenu EnableImageSprites="False">
                            </FilterMenu>
                        </telerik:RadGrid>
                    </td>
                    <td>
                        <telerik:RadGrid ID="StocksGrid" runat="server" AllowSorting="True" AutoGenerateColumns="False" CellSpacing="0" GridLines="None" Height="100%" Width="100%" GroupingSettings-CaseSensitive="false" OnDeleteCommand="StocksGrid_DeleteCommand" OnInsertCommand="StocksGrid_InsertCommand" OnNeedDataSource="StocksGrid_NeedDataSource" OnUpdateCommand="StocksGrid_UpdateCommand" OnItemCommand="StocksGrid_ItemCommand" OnSelectedIndexChanged="StocksGrid_SelectedIndexChanged">
                            <MasterTableView EditMode="PopUp" Width="800px" EditFormSettings-PopUpSettings-Modal="true" EditFormSettings-CaptionFormatString="Modo Edición" CommandItemDisplay="TopAndBottom" NoMasterRecordsText="No hay registros" AllowFilteringByColumn="true" TableLayout="Auto">
                                <CommandItemTemplate>
                                    <div style="padding: 5px 5px;">
                                        Menu: 
                             <asp:LinkButton ID="lbAdd" runat="server" CommandName="InitInsert" Visible='<%# !StocksGrid.MasterTableView.IsItemInserted %>'><img style="padding-left:10px; padding-right:5px; vertical-align:middle" alt="" src="../../Template/Icons/16px/text-plus-icon.png"/>Nuevo producto</asp:LinkButton>
                                        <asp:LinkButton ID="lbAddAditionalImage" CommandName="AddAditionalImage" runat="server" OnClientClick="OpenAditionalImages()"><img style="padding-left:10px; padding-right:5px; vertical-align:middle" alt="" src="../../Template/Icons/16px/text-plus-icon.png"/>Mostrar imágenes adicionales</asp:LinkButton>
                                        <asp:LinkButton ID="lbClearFilters" runat="server" OnClick="lbClearFilters_Click" Visible='<%# !StocksGrid.MasterTableView.IsItemInserted %>'><img style="padding-left:10px; padding-right:5px; vertical-align:middle" alt="" src="../../Template/Icons/16px/mixx-icon.png"/>Limpiar filtros</asp:LinkButton>
                                        <asp:LinkButton ID="lbShowError" runat="server" OnClick="lbShowError_Click" Visible='<%# HiddenFieldError.Value == string.Empty ? false : true %>'><img style="padding-left:10px; padding-right:5px; vertical-align:middle" alt="" src="../../Template/Icons/16px/bug-icon.png"/>Error técnico</asp:LinkButton>
                                    </div>
                                </CommandItemTemplate>
                                <CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Nuevo Master" RefreshText="Actualizar"></CommandItemSettings>

                                <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                                    <HeaderStyle Width="20px"></HeaderStyle>
                                </RowIndicatorColumn>

                                <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                                    <HeaderStyle Width="20px"></HeaderStyle>
                                </ExpandCollapseColumn>

                                <Columns>
                                    <telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderStyle-Width="25px" EditText="Editar" ItemStyle-Width="20px">
                                        <HeaderStyle Width="25px"></HeaderStyle>

                                        <ItemStyle Width="20px"></ItemStyle>
                                    </telerik:GridEditCommandColumn>
                                    <telerik:GridButtonColumn ConfirmText="¿Desea eliminar el registro?" Text="Eliminar" ConfirmDialogType="RadWindow" ConfirmDialogHeight="120" ConfirmDialogWidth="270" ConfirmTitle="Eliminar" ButtonType="ImageButton" CommandName="Delete" HeaderStyle-Width="25px">
                                        <HeaderStyle Width="25px"></HeaderStyle>
                                    </telerik:GridButtonColumn>
                                    <telerik:GridBoundColumn DataField="CompanyId" HeaderText="Compañía" UniqueName="CompanyId" ForceExtractValue="Always" Display="false" ReadOnly="true">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="StockId" HeaderText="ID Producto" UniqueName="StockId" ForceExtractValue="Always" ReadOnly="true" Display="false" FilterControlWidth="80px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="100px" AutoPostBackOnFilter="true">
                                        <HeaderStyle Width="100px"></HeaderStyle>
                                    </telerik:GridBoundColumn>

                                    <telerik:GridTemplateColumn HeaderText="Imagen" UniqueName="ImageUrl" DataField="ImageUrl" Display="true" HeaderStyle-Width="50px" AllowFiltering="false" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ForceExtractValue="Always" ItemStyle-Height="32px">
                                        <ItemTemplate>
                                            <asp:HyperLink ID="HyperLinkImageUrl" runat="server" ImageUrl="../../Template/Icons/24px/Image-JPEG-icon.png" onClick='<%# GetImageUrl(Eval("ImageUrl").ToString()) %>'></asp:HyperLink>
                                            <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="HyperLinkImageUrl" RelativeTo="Element" Position="BottomCenter" RenderInPageRoot="true">
                                                <asp:Image ID="ImagePreview" runat="server" Height="150px" ImageUrl='<%# GetPathStockImage(Eval("ImageUrl").ToString()) %>' />
                                            </telerik:RadToolTip>
                                        </ItemTemplate>
                                        <EditItemTemplate>
                                            <telerik:RadAsyncUpload ID="RadUploadImageUrl" ToolTip='<%# Eval("ImageUrl") %>' InitialFileInputsCount="1" Localization-Select="Buscar" OverwriteExistingFiles="true" ControlObjectsVisibility="None" runat="server"
                                                OnClientFileUploaded="OnClientFileUploaded" AllowedFileExtensions="jpg,png">
                                            </telerik:RadAsyncUpload>
                                        </EditItemTemplate>

                                        <HeaderStyle HorizontalAlign="Center" Width="50px"></HeaderStyle>

                                        <ItemStyle HorizontalAlign="Center" Height="32px"></ItemStyle>
                                    </telerik:GridTemplateColumn>

                                    <telerik:GridTemplateColumn UniqueName="PDFDetailUrl" HeaderStyle-Width="50px" HeaderText="PDF" DataField="PDFDetailUrl" AllowFiltering="false" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ForceExtractValue="Always" ItemStyle-Height="32px">
                                        <ItemTemplate>
                                            <asp:HyperLink ID="HyperLinkPDF" runat="server" ImageUrl="../../Template/Icons/24px/pdf-icon.png" Visible='<%# IsPDFVisible(Eval("PDFDetailUrl").ToString()) %>' onClick='<%# GetPDFUrl(Eval("PDFDetailUrl").ToString()) %>'></asp:HyperLink>
                                            <telerik:RadToolTip ID="RadToolTip2" runat="server" TargetControlID="HyperLinkPDF" RelativeTo="Element" Position="BottomCenter" RenderInPageRoot="true">
                                                <iframe id="iframeLightBox" runat="server" height="150px" width="150px" class="active" src='<%# GetPathStockPdf(Eval("PDFDetailUrl").ToString()) %>'>'></iframe>
                                            </telerik:RadToolTip>
                                        </ItemTemplate>
                                        <HeaderStyle Width="50px"></HeaderStyle>

                                        <ItemStyle HorizontalAlign="Center" Height="32px"></ItemStyle>

                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn UniqueName="VideoUrl" HeaderStyle-Width="50px" HeaderText="Video" DataField="VideoUrl" AllowFiltering="false" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ForceExtractValue="Always" ItemStyle-Height="32px">
                                        <ItemTemplate>
                                            <asp:HyperLink ID="HyperLinkVideo" runat="server" ImageUrl="../../Template/Icons/24px/File-Video-icon.png" Visible='<%# IsVideoVisible(Eval("VideoUrl").ToString()) %>' onClick='<%# GetVideoUrl(Eval("VideoUrl").ToString()) %>'></asp:HyperLink>
                                        </ItemTemplate>
                                        <HeaderStyle Width="50px"></HeaderStyle>

                                        <ItemStyle HorizontalAlign="Center" Height="32px"></ItemStyle>

                                    </telerik:GridTemplateColumn>


                                    <telerik:GridBoundColumn DataField="StockCode" HeaderText="Código Interno" UniqueName="StockCode" MaxLength="50"
                                        FilterControlWidth="100px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="130px" AutoPostBackOnFilter="true">
                                        <ColumnValidationSettings EnableRequiredFieldValidation="true">
                                            <RequiredFieldValidator ForeColor="Red" ErrorMessage="* Requerido" SetFocusOnError="true"></RequiredFieldValidator>
                                        </ColumnValidationSettings>

                                        <HeaderStyle Width="130px"></HeaderStyle>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="StockBarCode" HeaderText="Código Barras" UniqueName="StockBarCode" MaxLength="100"
                                        FilterControlWidth="100px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="130px" AutoPostBackOnFilter="true">
                                        <HeaderStyle Width="130px"></HeaderStyle>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Name" HeaderText="Nombre" UniqueName="Name" MaxLength="300"
                                        FilterControlWidth="180px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="200px" AutoPostBackOnFilter="true">
                                        <ColumnValidationSettings EnableRequiredFieldValidation="true">
                                            <RequiredFieldValidator ForeColor="Red" ErrorMessage="* Requerido" SetFocusOnError="true"></RequiredFieldValidator>
                                        </ColumnValidationSettings>

                                        <HeaderStyle Width="200px"></HeaderStyle>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Description" HeaderText="Descripción" UniqueName="Description" MaxLength="300"
                                        FilterControlWidth="280px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="300px" AutoPostBackOnFilter="true">
                                        <HeaderStyle Width="300px"></HeaderStyle>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="PromotionalNote" HeaderText="Nota Promocional" UniqueName="PromotionalNote" MaxLength="300"
                                        FilterControlWidth="280px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="300px" AutoPostBackOnFilter="true">
                                        <HeaderStyle Width="300px"></HeaderStyle>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Brand" HeaderText="Marca" UniqueName="Brand" MaxLength="50"
                                        FilterControlWidth="100px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="130px" AutoPostBackOnFilter="true">
                                        <HeaderStyle Width="130px"></HeaderStyle>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="UnitStock" HeaderText="Unidad de Venta" UniqueName="UnitStock" MaxLength="50"
                                        FilterControlWidth="100px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="130px" AutoPostBackOnFilter="true">
                                        <HeaderStyle Width="130px"></HeaderStyle>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="UnitStockByBox" HeaderText="Unidades de Venta por Caja" UniqueName="UnitStockByBox" MaxLength="50"
                                        FilterControlWidth="120px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="170px" AutoPostBackOnFilter="true">
                                        <HeaderStyle Width="150px"></HeaderStyle>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="MinQuantity" HeaderText="Cantidad Mínima" UniqueName="MinQuantity" MaxLength="15" DataType="System.Int32"
                                        FilterControlWidth="100px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="130px" AutoPostBackOnFilter="true">
                                        <HeaderStyle Width="130px"></HeaderStyle>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="ReservedQuantity" HeaderText="Cantidad de Reserva" UniqueName="ReservedQuantity" MaxLength="15" DataType="System.Decimal"
                                        FilterControlWidth="120px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="170px" AutoPostBackOnFilter="true">
                                        <HeaderStyle Width="150px"></HeaderStyle>
                                    </telerik:GridBoundColumn>



                                    <telerik:GridBoundColumn DataField="VideoThumbnailUrl" HeaderText="Video Thumbnail" UniqueName="VideoThumbnailUrl" Display="false" ReadOnly="true" ForceExtractValue="Always"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="StockCategoryId" HeaderText="ID Categoría" UniqueName="StockCategoryId" Display="false" ReadOnly="true" ForceExtractValue="Always"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="LastTick" HeaderText="LastTick" UniqueName="LastTick" Display="false" ReadOnly="true" ForceExtractValue="Always"></telerik:GridBoundColumn>


                                </Columns>

                                <EditFormSettings EditFormType="Template">
                                    <EditColumn UniqueName="EditCommandColumn1" FilterControlAltText="Filter EditCommandColumn1 column"></EditColumn>

                                    <FormTemplate>
                                        <telerik:RadTabStrip ID="StockByCategoriesRadTabStrip" runat="server" MultiPageID="RadMultiPages" Width="775px" SelectedIndex="0">
                                            <Tabs>
                                                <telerik:RadTab runat="server" Text="Información del producto" PageViewID="InfoProductRadPageView" Selected="True">
                                                </telerik:RadTab>
                                                <telerik:RadTab runat="server" Text="Información adicional" PageViewID="InfoAditionalRadPageView">
                                                </telerik:RadTab>
                                                <telerik:RadTab runat="server" Text="Imagenes adicionales" PageViewID="ImagesAditionalRadPageView">
                                                </telerik:RadTab>
                                            </Tabs>
                                        </telerik:RadTabStrip>
                                        <telerik:RadMultiPage ID="RadMultiPages" runat="server" SelectedIndex="0" Width="775px">
                                            <telerik:RadPageView ID="InfoProductRadPageView" runat="server" Width="775px">
                                                <fieldset>
                                                    <legend>Información de productos</legend>
                                                    <table border="0">
                                                        <tr>
                                                            <td style="vertical-align: top; text-align: left;">Código Interno:</td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadTextBox ID="txtStockCode" Text='<%# Eval("StockCode") %>' runat="server" MaxLength="50" TabIndex="1">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                            <td style="vertical-align: top; text-align: left;">Descripción:</td>
                                                            <td rowspan="3" style="vertical-align: top" colspan="2">
                                                                <telerik:RadTextBox ID="txtDescription" Text='<%# Eval("Description") %>' runat="server" Height="70px" MaxLength="2000" TextMode="MultiLine" Width="300px" TabIndex="11">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top; text-align: left;">Código Barras:</td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadTextBox ID="txtBarCode" Text='<%# Eval("StockBarCode") %>' runat="server" MaxLength="100" TabIndex="2">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top; text-align: left;">Nombre:</td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadTextBox ID="txtName" Text='<%# Eval("Name") %>' runat="server" MaxLength="300" Width="160px" TabIndex="3">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top; text-align: left;">Marca:</td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadTextBox ID="txtBrand" Text='<%# Eval("Brand") %>' runat="server" MaxLength="100" TabIndex="4">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                            <td style="vertical-align: top; text-align: left;">Nota Promocional:</td>
                                                            <td rowspan="4" style="vertical-align: top" colspan="2">
                                                                <telerik:RadTextBox ID="txtNote" Text='<%# Eval("PromotionalNote") %>' runat="server" Height="90px" MaxLength="300" TextMode="MultiLine" Width="300px" TabIndex="12">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top; text-align: left;">Unidad de Venta:</td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadTextBox ID="txtUnitySale" Text='<%# Eval("UnitStock") %>' runat="server" MaxLength="50" TabIndex="5">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top; text-align: left;">Unidades de Venta por Caja:</td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadTextBox ID="txtUnityBySale" Text='<%# Eval("UnitStockByBox") %>' runat="server" MaxLength="50" TabIndex="6">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top; text-align: left;">Cantidad Mínima:</td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadTextBox ID="txtMinQuantity" Text='<%# Eval("MinQuantity") %>' runat="server" MaxLength="15" TabIndex="7" InputType="Number">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top; text-align: left;">Cantidad de Reserva:</td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadTextBox ID="txtReservedQuantity" Text='<%# Eval("ReservedQuantity") %>' runat="server" MaxLength="15" TabIndex="8" InputType="Number">
                                                                </telerik:RadTextBox>
                                                            </td>
                                                            <td style="text-align: left; vertical-align: top"></td>
                                                            <td>&nbsp;</td>
                                                            <td>&nbsp;</td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top; text-align: left;">
                                                                <telerik:RadButton ID="btnSave" runat="server" Text="Salvar" Image-ImageUrl="~/Template/Icons/16px/insert.gif" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' Height="18px" Width="18px">
                                                                </telerik:RadButton>
                                                                <telerik:RadButton ID="btnCancel" runat="server" Text="Cancelar" Image-ImageUrl="~/Template/Icons/16px/cancel.gif" CommandName="Cancel" Height="18px" Width="18px">
                                                                </telerik:RadButton>
                                                            </td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadTextBox ID="txtStockID" Text='<%# Eval("StockID") %>' runat="server" Visible="false">
                                                                </telerik:RadTextBox></td>
                                                            <td style="vertical-align: top; text-align: left;">
                                                                <telerik:RadTextBox ID="txtStockCategoryID" Text='<%# Eval("StockCategoryID") %>' runat="server" Visible="false">
                                                                </telerik:RadTextBox></td>
                                                            </td>
                                                <td style="vertical-align: top" colspan="2">&nbsp;</td>
                                                        </tr>
                                                    </table>
                                                </fieldset>
                                            </telerik:RadPageView>

                                            <telerik:RadPageView ID="InfoAditionalRadPageView" runat="server" Width="775px">
                                                <fieldset>
                                                    <legend>Información de productos</legend>
                                                    <table border="0">
                                                        <tr>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div class="span3 bg-amber padding5 text-center">
                                                                    <h3 class="fg-white">Imagen</h3>
                                                                </div>
                                                            </td>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div class="span3 bg-green padding5 text-center">
                                                                    <h3 class="fg-white">PDF</h3>
                                                                </div>
                                                            </td>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div class="span3 bg-red padding5 text-center">
                                                                    <h3 class="fg-white">Video</h3>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div id="DragAndDropImage" class="span3 bg-amber padding10 text-center buzz-out">
                                                                    <h6 class="fg-white">Arrastra la imagen que deseas subir</h6>
                                                                </div>
                                                            </td>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div id="DragAndDropPDF" class="span3 bg-green padding10 text-center buzz-out">
                                                                    <h6 class="fg-white">Arrastra el PDF que deseas subir</h6>
                                                                </div>
                                                            </td>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div id="DragAndDropVideo" class="span3 bg-red padding10 text-center buzz-out">
                                                                    <h6 class="fg-white">Arrastra la video que deseas subir</h6>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadAsyncUpload ID="RadAsyncUploadImage"
                                                                    runat="server"
                                                                    AllowedFileExtensions=".jpg,.png"
                                                                    ControlObjectsVisibility="None"
                                                                    DropZones="#DragAndDropImage"
                                                                    HideFileInput="True"
                                                                    Localization-Remove="Eliminar"
                                                                    Localization-Select="Buscar imagen"
                                                                    MaxFileInputsCount="1"
                                                                    OverwriteExistingFiles="true"
                                                                    Skin="MetroTouch"
                                                                    OnClientValidationFailed="General_ValidationFailed"
                                                                    EnableInlineProgress="False"
                                                                    Width="220px"
                                                                    ToolTip='<%# Eval("ImageUrl") %>'                                                                    
                                                                    CssClass="buzz-out" 
                                                                    />
                                                            </td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadAsyncUpload ID="RadAsyncUploadPDF"
                                                                    runat="server"
                                                                    AllowedFileExtensions=".pdf"
                                                                    ControlObjectsVisibility="None"
                                                                    DropZones="#DragAndDropPDF"
                                                                    HideFileInput="true"
                                                                    InitialFileInputsCount="1"
                                                                    Localization-Remove="Eliminar"
                                                                    Localization-Select="Buscar pdf"
                                                                    MaxFileInputsCount="1"
                                                                    OverwriteExistingFiles="true"
                                                                    Skin="MetroTouch"
                                                                    OnClientValidationFailed="General_ValidationFailed"
                                                                    EnableInlineProgress="false"
                                                                    Width="220px"
                                                                    ToolTip='<%# Eval("PDFDetailUrl") %>'
                                                                    CssClass="buzz-out"
                                                                     />
                                                            </td>
                                                            <td style="vertical-align: top">
                                                                <telerik:RadAsyncUpload ID="RadAsyncUploadVideo"
                                                                    runat="server"
                                                                    AllowedFileExtensions=".mp4"
                                                                    ControlObjectsVisibility="None"
                                                                    DropZones="#DragAndDropVideo"
                                                                    HideFileInput="true"
                                                                    InitialFileInputsCount="1"
                                                                    Localization-Remove="Eliminar"
                                                                    Localization-Select="Buscar video"
                                                                    MaxFileInputsCount="1"
                                                                    OverwriteExistingFiles="true"
                                                                    Skin="MetroTouch"
                                                                    OnClientValidationFailed="General_ValidationFailed"
                                                                    EnableInlineProgress="false"
                                                                    Width="220px"
                                                                    ToolTip='<%# Eval("VideoUrl") %>'
                                                                    CssClass="buzz-out"
                                                                    />
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <telerik:RadButton ID="RadButton1" runat="server" Text="Salvar" Image-ImageUrl="~/Template/Icons/16px/insert.gif" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' Height="18px" Width="18px">
                                                    </telerik:RadButton>
                                                    <telerik:RadButton ID="RadButton2" runat="server" Text="Cancelar" Image-ImageUrl="~/Template/Icons/16px/cancel.gif" CommandName="Cancel" Height="18px" Width="18px">
                                                    </telerik:RadButton>
                                                </fieldset>


                                            </telerik:RadPageView>
                                            <telerik:RadPageView ID="ImagesAditionalRadPageView" runat="server" Width="775px">
                                                <fieldset>
                                                    <legend>Imagenes adicionales</legend>

                                                    <table>
                                                        <tr>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div class="span3 bg-amber padding5 text-center">
                                                                    <h3 class="fg-white">Imagen</h3>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div id="DragAndDropImageAditional" class="span3 bg-amber padding10 text-center buzz-out">
                                                                    <h6 class="fg-white">Arrastra la imagen que deseas subir</h6>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="metro" style="vertical-align: top">
                                                                <telerik:RadAsyncUpload ID="RadAsyncUploadAditionalImages"
                                                                    runat="server"
                                                                    MultipleFileSelection="Automatic"
                                                                    AllowedFileExtensions=".jpg,.png"
                                                                    ControlObjectsVisibility="None"
                                                                    DropZones="#DragAndDropImageAditional"
                                                                    HideFileInput="True"
                                                                    Localization-Remove="Eliminar"
                                                                    Localization-Select="Buscar imagen"
                                                                    OverwriteExistingFiles="true"
                                                                    Skin="MetroTouch"
                                                                    OnClientValidationFailed="General_ValidationFailed"
                                                                    EnableInlineProgress="False"
                                                                    Width="220px"                                                                   
                                                                    CssClass="buzz-out"                                                                   
                                                                     />
                                                            </td>
                                                        </tr>

                                                    </table>
                                                    <telerik:RadButton ID="RadButton3" runat="server" Text="Salvar" Image-ImageUrl="~/Template/Icons/16px/insert.gif" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' Height="18px" Width="18px">
                                                    </telerik:RadButton>
                                                    <telerik:RadButton ID="RadButton4" runat="server" Text="Cancelar" Image-ImageUrl="~/Template/Icons/16px/cancel.gif" CommandName="Cancel" Height="18px" Width="18px">
                                                    </telerik:RadButton>
                                                </fieldset>
                                            </telerik:RadPageView>
                                        </telerik:RadMultiPage>

                                    </FormTemplate>
                                    <PopUpSettings Modal="True" Width="775px"></PopUpSettings>
                                </EditFormSettings>
                            </MasterTableView>
                            <GroupingSettings CaseSensitive="False"></GroupingSettings>

                            <ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">
                                <ClientEvents OnPopUpShowing="onPopUpShowing" />
                                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"></Scrolling>
                                <Selecting AllowRowSelect="True"></Selecting>
                            </ClientSettings>
                            <FilterMenu EnableImageSprites="False"></FilterMenu>
                        </telerik:RadGrid></td>
                </tr>
            </table>

            <telerik:RadWindow ID="rwStockAditionalImages" Style="overflow: hidden" runat="server" Width="432px" Height="505px" EnableShadow="true" Behaviors="Close" ShowContentDuringLoad="false" VisibleStatusbar="false" Modal="true">
                <ContentTemplate>
                    <telerik:RadGrid ID="StocksAditionalImagesGrid" runat="server" Style="overflow: hidden" AllowSorting="false" AutoGenerateColumns="False" CellSpacing="0" GridLines="None" Width="400px" Height="452px" GroupingSettings-CaseSensitive="false" OnNeedDataSource="StocksAditionalImagesGrid_NeedDataSource" OnInsertCommand="StocksAditionalImagesGrid_InsertCommand" OnDeleteCommand="StocksAditionalImagesGrid_DeleteCommand">
                        <MasterTableView EditMode="PopUp" EditFormSettings-PopUpSettings-Modal="true" EditFormSettings-CaptionFormatString="Modo Edición" CommandItemDisplay="TopAndBottom" NoMasterRecordsText="No hay registros" AllowFilteringByColumn="false" TableLayout="Auto">
                            <CommandItemTemplate>
                                <div style="padding: 5px 5px;">
                                    Menu: 
                             <asp:LinkButton ID="lbAdd" runat="server" CommandName="InitInsert" Visible='<%# !StocksAditionalImagesGrid.MasterTableView.IsItemInserted %>'><img style="padding-left:10px; padding-right:5px; vertical-align:middle" alt="" src="../../Template/Icons/16px/text-plus-icon.png"/>Nueva Imagen</asp:LinkButton>
                                    <asp:LinkButton ID="lbShowError" runat="server" OnClick="lbShowError_Click" Visible='<%# HiddenFieldError.Value == string.Empty ? false : true %>'><img style="padding-left:10px; padding-right:5px; vertical-align:middle" alt="" src="../../Template/Icons/16px/bug-icon.png"/>Error Técnico</asp:LinkButton>
                                </div>
                            </CommandItemTemplate>
                            <CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Nuevo Master" RefreshText="Actualizar"></CommandItemSettings>

                            <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                                <HeaderStyle Width="20px"></HeaderStyle>
                            </RowIndicatorColumn>

                            <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                                <HeaderStyle Width="20px"></HeaderStyle>
                            </ExpandCollapseColumn>

                            <Columns>
                                <telerik:GridButtonColumn ConfirmText="¿Desea eliminar el registro?" Text="Eliminar" ConfirmDialogType="RadWindow" ConfirmDialogHeight="120" ConfirmDialogWidth="270" ConfirmTitle="Eliminar" ButtonType="ImageButton" CommandName="Delete" HeaderStyle-Width="25px" />
                                <telerik:GridBoundColumn DataField="CompanyId" HeaderText="Compañía" UniqueName="CompanyId" ForceExtractValue="Always" Display="false" ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="StockId" HeaderText="ID Producto" UniqueName="StockId" ForceExtractValue="Always" ReadOnly="true" Display="false" FilterControlWidth="80px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="50px" AutoPostBackOnFilter="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="NumImage" HeaderText="Número Imagen" UniqueName="NumImage" ForceExtractValue="Always" ReadOnly="true" FilterControlWidth="30px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="50px" AutoPostBackOnFilter="true" Display="false" ItemStyle-HorizontalAlign="Center">
                                </telerik:GridBoundColumn>
                                <telerik:GridTemplateColumn HeaderText="Imagen" UniqueName="ImageUrl" DataField="ImageUrl" Display="true" HeaderStyle-Width="200px" AllowFiltering="false" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" ForceExtractValue="Always" ItemStyle-Height="32px">
                                    <ItemTemplate>
                                        <asp:Image ID="ImageOriginal" ImageUrl='<%# GetPathStockImage(Eval("ImageUrl").ToString()) %>' Width="100px" runat="server" AlternateText='<%# Eval("ImageUrl") %>' />
                                    </ItemTemplate>                                    
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn DataField="LastTick" HeaderText="LastTick" UniqueName="LastTick" Display="false" ReadOnly="true" ForceExtractValue="Always"
                                    FilterControlWidth="100px" CurrentFilterFunction="Contains" ShowFilterIcon="false" HeaderStyle-Width="130px" AutoPostBackOnFilter="true">
                                </telerik:GridBoundColumn>
                            </Columns>
                            <EditFormSettings EditFormType="Template">
                                <EditColumn InsertText="Agregar" UpdateText="Actualizar" CancelText="Cancelar" ButtonType="ImageButton"></EditColumn>

                                         <FormTemplate>
                                              <fieldset style="height:370px">
                                                    <legend>Imagenes adicionales</legend>

                                                    <table>
                                                        <tr>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div class="span3 bg-lightBlue padding5 text-center">
                                                                    <h4 class="fg-white">Imágenes</h4>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="vertical-align: top" class="metro">
                                                                <div id="DragAndDropImageAditional" class="span3 bg-lightBlue padding10 text-center buzz-out">
                                                                    <h6 class="fg-white">Arrastra la imagen(as) que deseas subir</h6>                                                                   
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="metro">
                                                                <telerik:RadAsyncUpload ID="RadAsyncUploadAditionalImages"
                                                                    runat="server"
                                                                    MultipleFileSelection="Automatic"
                                                                    AllowedFileExtensions=".jpg,.png"
                                                                    ControlObjectsVisibility="None"
                                                                    DropZones="#DragAndDropImageAditional"
                                                                    HideFileInput="True"
                                                                    Localization-Remove=""
                                                                    Localization-Select="Buscar imagen"
                                                                    OverwriteExistingFiles="true"
                                                                    Skin="Metro"
                                                                    OnClientValidationFailed="General_ValidationFailed"
                                                                    EnableInlineProgress="False"
                                                                    Width="220px"
                                                                    Height="180px"                                                                   
                                                                    CssClass="buzz-out"
                                                                    OnClientFileUploading="RadAsyncUploadAditionalImages_OnClientFileUploading"
                                                                    OnClientFilesUploaded="RadAsyncUploadAditionalImages_OnClientFilesUploaded"
                                                                    ToolTip="Máximo 4 imágenes a subir por evento"
                                                                    />
                                                            </td>
                                                        </tr>

                                                    </table>
                                                    <telerik:RadButton ID="btnSaveAditionalImage" runat="server" Text="Salvar" Enabled="false" Image-ImageUrl="~/Template/Icons/16px/insert.gif" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' Height="18px" Width="18px">
                                                    </telerik:RadButton>
                                                    <telerik:RadButton ID="RadButton4" runat="server" Text="Cancelar" Image-ImageUrl="~/Template/Icons/16px/cancel.gif" CommandName="Cancel" Height="18px" Width="18px">
                                                    </telerik:RadButton>
                                                </fieldset>
                                          </FormTemplate>                                

                                <PopUpSettings Modal="True"  Width="250px" Height="400px"></PopUpSettings>
                            </EditFormSettings>
                        </MasterTableView>
                        <ClientSettings EnableRowHoverStyle="true">
                            <ClientEvents OnPopUpShowing="PopUpShowing" />
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True"></Scrolling>
                            <Selecting AllowRowSelect="True"></Selecting>
                        </ClientSettings>
                        <FilterMenu EnableImageSprites="False"></FilterMenu>
                    </telerik:RadGrid>

                </ContentTemplate>
            </telerik:RadWindow>
            <telerik:RadLightBox ID="RadLightBox1" runat="server" Modal="true" Height="500px" Width="800px">
                <ClientSettings>
                    <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Resize" />
                </ClientSettings>
                <Items>
                    <telerik:RadLightBoxItem></telerik:RadLightBoxItem>
                </Items>
            </telerik:RadLightBox>
            <telerik:RadLightBox ID="RadLightBox2" runat="server" Modal="true" Width="800px" PreserveCurrentItemTemplates="true">
                <Items>
                    <telerik:RadLightBoxItem>
                        <ItemTemplate>
                            <iframe id="iframeLightBox" runat="server" width="100%" height="500px" class="active"></iframe>
                        </ItemTemplate>
                    </telerik:RadLightBoxItem>
                </Items>
            </telerik:RadLightBox>
        </div>

        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                //<![CDATA[
                var $ = $telerik.$;
                function pageLoad() {

                    $(document).bind({ "drop": function (e) { e.preventDefault(); } });

                    var dropZone1 = $(document).find("#DragAndDropImage");
                    dropZone1.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone1); } })
                                .bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone1); } })
                                .bind({ "drop": function (e) { dropHandler(e, dropZone1); } });

                    var dropZone2 = $(document).find("#DragAndDropPDF");
                    dropZone2.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone2); } })
                                .bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone2); } })
                                .bind({ "drop": function (e) { dropHandler(e, dropZone2); } });


                    var dropZone3 = $(document).find("#DragAndDropVideo");
                    dropZone3.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone3); } })
                                .bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone3); } })
                                .bind({ "drop": function (e) { dropHandler(e, dropZone3); } });


                }

                function dropHandler(e, dropZone) {
                    dropZone[0].style.backgroundColor = "#357A2B";
                }

                function dragEnterHandler(e, dropZone) {
                    var dt = e.originalEvent.dataTransfer;
                    var isFile = (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file')));
                    if (isFile || $telerik.isSafari5 || $telerik.isIE10Mode || $telerik.isOpera)
                        dropZone[0].style.backgroundColor = "#000000";
                }

                function dragLeaveHandler(e, dropZone) {
                    if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
                        dropZone[0].style.backgroundColor = "#357A2B";
                }
                
                //Validation File
                function RadAsyncUploadAditionalImages_OnClientFileUploading(sender, args) {
                    var filesCount = sender.getUploadedFiles().length + 1;                    
                    if (filesCount > 4) {
                        var $row = $(args.get_row());
                        var span = createError('Excede el límite de imágenes');
                        $row.addClass("ruError");
                        $row.append(span);

                        args.set_cancel(true);

                        var btnSave = $telerik.findControl(sender.get_parent().get_element(), "btnSaveAditionalImage");
                        btnSave.set_enabled(false);
                    }                   

                }

                function RadAsyncUploadAditionalImages_OnClientFilesUploaded(sender, args) {                                       
                    var btnSave = $telerik.findControl(sender.get_parent().get_element(), "btnSaveAditionalImage");
                    btnSave.set_enabled(true);
                }
                               

                function General_ValidationFailed(radAsyncUpload, args) {
                    console.log('Validanting Files...');
                    var $row = $(args.get_row());
                    var erorMessage = getErrorMessage(radAsyncUpload, args);
                    var span = createError(erorMessage);
                    $row.addClass("ruError");
                    $row.append(span);
                }

                function getErrorMessage(sender, args) {                   
                    var fileExtention = args.get_fileName().substring(args.get_fileName().lastIndexOf('.') + 1, args.get_fileName().length);
                    if (args.get_fileName().lastIndexOf('.') != -1) {//this checks if the extension is correct
                        if (sender.get_allowedFileExtensions().indexOf(fileExtention) == -1) {
                            return ("No es un archivo válido");
                        }
                    }
                    else {
                        return ("No es un archivo válido");
                    }
                }

                function createError(erorMessage) {
                    var input = '<br/><span class="ruErrorMessage">' + erorMessage + ' </span>';
                    return input;
                }

                //]]>
            </script>
        </telerik:RadScriptBlock>

    </form>

    <br />
</body>
</html>
